<template>
	<view>
		<view>
			<uni-nav-bar fixed :status-bar="true">
				<view slot="left" class="navbar-icon left-icon icon-font">&#xe606;</view>

				<view class="top-search flex-box" @tap="toSearch">
					<view class="icon-font">&#xe714;</view>
					{{ searchTxt }}
				</view>

				<!-- #ifdef APP-PLUS || H5 -->
				<view slot="right" class="navbar-icon icon-font" @tap="toPlayPage">&#xe649;</view>
				<!-- #endif -->
			</uni-nav-bar>

			<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" @up="upCallback" :up="upOption">
				<!-- 轮播图 -->
				<view class="banner">
					<swiper
						class="swiper"
						:indicator-dots="true"
						:autoplay="true"
						indicator-active-color="#ff372b"
						indicator-color="rgba(255,255,255, .5)"
						duration="500"
						:circular="true"
					>
						<swiper-item v-for="(item, index) in bannerList" :key="index">
							<view class="item">
								<image class="img" :src="item.imageUrl + $imgSuffix"></image>
								<view class="tag">{{ item.typeTitle }}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 主入口 -->
				<view class="main-bar flex-box">
					<view class="flex-item" v-for="(item, index) in contentBar" :key="index">
						<image class="img" :src="'/static/image/index/t_' + (index + 1) + '.png'"></image>
						<view>{{ item.name }}</view>
						<view v-if="index == 0" class="date">{{ curDate }}</view>
					</view>
				</view>

				<!-- 推荐歌单1 -->
				<song-list title="推荐歌单" :list="recommendSongs"></song-list>

				<!-- 推荐歌单2 -->
				<view class="song-list">
					<view class="tit-bar">
						推荐歌单
						<view class="more fr">歌单广场</view>
					</view>
					<scroll-view class="scroll-list" scroll-x="true">
						<view class="item" v-for="(item, index) in recommendSongs" :key="index" @tap="toAlbum(item)">
							<image class="img" :src="item.picUrl + $imgSuffix"></image>
							<view class="desc ellipsis">{{ item.name }}</view>
							<view class="count">{{ item.playCount }}</view>
						</view>
					</scroll-view>
				</view>

				<!-- 新碟新歌 -->
				<view class="song-list ">
					<view class="switch-line flex-box">
						<view class="flex-box">
							<view class="switch-item" :class="{ on: isAlbum }" @tap="switchTag(true)">新碟</view>
							|
							<view class="switch-item" :class="{ on: !isAlbum }" @tap="switchTag(false)">新歌</view>
						</view>
						<view class="more" v-if="isAlbum">更多新碟</view>
						<view class="more" v-else>新歌推荐</view>
					</view>

					<scroll-view class="scroll-list" scroll-x="true">
						<view class="item" v-for="(item, index) in latestAlbum" :key="index">
							<image class="img" :src="item.picUrl + $imgSuffix"></image>
							<view class="desc ellipsis">{{ item.name }}</view>
							<view class="count">{{ item.playCount }}</view>
						</view>
					</scroll-view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
import { listBanner, listRecommendSongs, listNewesTalbum } from '@/api/index.js';
import { allvideo } from '@/api/video.js';
import songList from '../../components/songList';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar/uni-nav-bar.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';

export default {
	mixins: [MescrollMixin],
	data() {
		return {
			downOption: {
				auto: false,
				native: true
			},
			upOption: {
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				textNoMore: "-- END --"
			},
			bannerList: [],
			curDate: '',
			searchTxt: '朴树',
			contentBar: [
				{
					name: '每日推荐'
				},
				{
					name: '歌单'
				},
				{
					name: '排行榜'
				},
				{
					name: '电台'
				},
				{
					name: '直播'
				}
			],
			recommendSongs: [],
			isAlbum: true,
			latestAlbum: [],
			latestTempAlbum: []
		};
	},
	onLoad() {
		this._listBanner();
		this._listRecommendSongs();
		this._listNewesTalbum();
		this.curDate = new Date().getDate();
		// #ifdef APP-PLUS
		let style = this.$mp.page.$getAppWebview().getStyle();
		style.pullToRefresh.offset = 44 + plus.navigator.getStatusbarHeight();
		this.$mp.page.$getAppWebview().setStyle(style);
		// #endif
	},
	methods: {
		switchTag(isAlbum) {
			this.isAlbum = isAlbum;
			if (isAlbum) {
				this.latestAlbum = this.latestTempAlbum.slice(0, 3);
			} else {
				this.latestAlbum = this.latestTempAlbum.slice(3, 6);
			}
		},
		// mescroll 初始化
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		// 下拉刷新函数
		downCallback() {
			this._listBanner();
			this._listRecommendSongs();
			this._listNewesTalbum();
			this.curDate = new Date().getDate();
			this.mescroll.endSuccess();
		},
		/*上拉加载的回调*/
		upCallback(page) {
			this.mescroll.endSuccess(0);
		},

		toSearch() {	// 去搜索页
			uni.navigateTo({
				url: '/pages/subpages/index/search',
				animationType: 'none'
			});
		},
		
		toAlbum(obj) {	// 去歌单页
			uni.navigateTo({
				url: '/pages/subpages/index/album?item=' + encodeURIComponent(JSON.stringify(obj)),
			});
		},
		
		toPlayPage() {
			uni.navigateTo({
				url: '/pages/subpages/index/play'
			});
		},

		// 获取banner
		_listBanner() {
			listBanner({}).then(res => {
				this.bannerList = res.banners;
			});
		},
		// 获取推荐歌单
		_listRecommendSongs() {
			listRecommendSongs({
				limit: 6
			}).then(res => {
				res.result.forEach(item => {
					if (item.playCount > 10000) {
						item.playCount = parseInt(item.playCount / 10000) + '万';
					}
				});
				this.recommendSongs = res.result;
			});
		},
		// 获取新碟
		_listNewesTalbum() {
			listNewesTalbum().then(res => {
				this.latestTempAlbum = res.albums;
				this.latestAlbum = res.albums.slice(0, 3);
			});
		}
	},
	components: {
		songList,
		uniNavBar
	}
};
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}

.left-icon {
	padding-left: 20rpx;
}

.top-search {
	width: 530rpx;
	height: 65rpx;
	line-height: 65rpx;
	color: #c6c6c6;
	border-radius: 50rpx;
	background: #f7f7f7;
	justify-content: center;
	.icon-font {
		margin-right: 12rpx;
	}
}

.banner {
	width: 100%;
	height: 268rpx;
	margin: 20rpx auto 44rpx;

	.swiper {
		height: 268rpx;

		.item {
			position: relative;
			display: block;
			width: 686rpx;
			height: 268rpx;
			margin: 0 auto;
			border-radius: 14rpx;
			overflow: hidden;
		}

		.img {
			width: 100%;
			height: 100%;
		}

		.tag {
			position: absolute;
			bottom: 0;
			right: 0;
			height: 34rpx;
			padding: 0 14rpx;
			line-height: 34rpx;
			color: #fff;
			background-color: #43a5f0;
			z-index: 10;
			border-top-left-radius: 14rpx;
		}
	}
}

.main-bar {
	padding-bottom: 22rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;

	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}

	.flex-item {
		position: relative;

		.date {
			position: absolute;
			left: 60rpx;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: scale(0.8);
		}
	}
}

.song-list {
	.tit-bar {
		width: 650rpx;
		margin: 20rpx auto 0;
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}

	.more {
		border: 1px solid #e6e6e6;
		border-radius: 50rpx;
		margin-top: 30rpx;
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-weight: 400;
		font-size: 24rpx;
	}

	.scroll-list {
		margin-left: 50rpx;
		white-space: nowrap;
		width: 700rpx;

		.item {
			position: relative;
			display: inline-block;
			width: 200rpx;
			margin-right: 25rpx;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 40rpx;
				z-index: 2;
				background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
			}

			.img {
				border-radius: 10rpx;
				width: 100%;
				height: 200rpx;
			}

			.desc {
				height: 62rpx;
				width: 200rpx;
				margin-top: 12rpx;
				line-height: 30rpx;
			}

			.count {
				position: absolute;
				top: 0;
				right: 0;
				color: #fff;
				padding-left: 25rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				transform: scale(0.8);
				z-index: 10;
				background: url()
					no-repeat;
				background-size: 25rpx 25rpx;
			}
		}
	}

	.switch-line {
		justify-content: space-between;
		width: 700rpx;

		.flex-box {
			margin-left: 50rpx;
			line-height: 110rpx;
			color: #999;
		}

		.switch-item {
			&:first-child {
				width: 80rpx;
			}

			&:last-child {
				padding-left: 22rpx;
			}

			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
}
</style>
